<template>
  <view class="page-container">
    <!-- 主要内容区域 -->
    <view class="main-content">
      <!-- 状态栏占位符 -->
      <view class="status-bar" />
      <!-- 醒目的标题 -->
      <view class="template-title-container">
        <text class="template-name">Lodash-es 示例</text>
        <view class="title-underline" />
      </view>

      <!-- 示例内容区域 -->
      <view class="content-section">
        <view class="section">
          <view class="subtitle">1. 数组操作</view>
          <view class="example">
            <view class="example-title">chunk 示例：</view>
            <view class="example-content">原数组：[1, 2, 3, 4, 5]</view>
            <view class="example-content">分组大小：2</view>
            <view class="example-content">结果：{{ JSON.stringify(chunkResult, null, 2) }}</view>
          </view>

          <view class="example">
            <view class="example-title">uniq 示例：</view>
            <view class="example-content">原数组：[1, 2, 2, 3, 3, 4, 5, 5]</view>
            <view class="example-content">去重结果：{{ JSON.stringify(uniqResult) }}</view>
          </view>

          <view class="example">
            <view class="example-title">filter 示例：</view>
            <view class="example-content">原数组：[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]</view>
            <view class="example-content">大于 5 的数：{{ JSON.stringify(filterResult) }}</view>
          </view>
        </view>

        <view class="section">
          <view class="subtitle">2. 对象操作</view>
          <view class="example">
            <view class="example-title">pick 示例：</view>
            <view class="example-content">原对象：{{ JSON.stringify(user, null, 2) }}</view>
            <view class="example-content">
              选择 name 和 age：{{ JSON.stringify(pickResult, null, 2) }}
            </view>
          </view>

          <view class="example">
            <view class="example-title">omit 示例：</view>
            <view class="example-content">原对象：{{ JSON.stringify(user, null, 2) }}</view>
            <view class="example-content">
              排除 email 和 address：{{ JSON.stringify(omitResult, null, 2) }}
            </view>
          </view>

          <view class="example">
            <view class="example-title">merge 示例：</view>
            <view class="example-content">对象1：{{ JSON.stringify(user, null, 2) }}</view>
            <view class="example-content">对象2：{{ JSON.stringify(extraInfo, null, 2) }}</view>
            <view class="example-content">
              合并结果：{{ JSON.stringify(mergeResult, null, 2) }}
            </view>
          </view>
        </view>

        <view class="section">
          <view class="subtitle">3. 字符串操作</view>
          <view class="example">
            <view class="example-title">camelCase 示例：</view>
            <view class="example-content">原字符串：hello_world</view>
            <view class="example-content">转换结果：{{ camelCaseResult }}</view>
          </view>

          <view class="example">
            <view class="example-title">capitalize 示例：</view>
            <view class="example-content">原字符串：hello world</view>
            <view class="example-content">转换结果：{{ capitalizeResult }}</view>
          </view>

          <view class="example">
            <view class="example-title">trim 示例：</view>
            <view class="example-content">原字符串：' hello world '</view>
            <view class="example-content">去除空格：{{ trimResult }}</view>
          </view>
        </view>

        <view class="section">
          <view class="subtitle">4. 工具函数</view>
          <view class="example">
            <view class="example-title">debounce 示例：</view>
            <view class="example-content">输入内容：{{ debounceInput }}</view>
            <view class="example-content">防抖结果：{{ debounceResult }}</view>
            <input
              type="text"
              v-model="debounceInput"
              @input="handleDebounceInput"
              placeholder="输入内容，观察防抖效果"
            />
          </view>

          <view class="example">
            <view class="example-title">throttle 示例：</view>
            <view class="example-content">点击次数：{{ clickCount }}</view>
            <view class="example-content">节流结果：{{ throttleResult }}</view>
            <button class="throttle-btn" @click="handleThrottleClick">点击我（节流）</button>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部装饰 -->
    <view class="footer-decoration">
      <view class="deco-shape-1" />
      <view class="deco-shape-2" />
    </view>
  </view>
</template>

<script>
import { filter } from 'lodash-es'
import { chunk, uniq } from 'lodash-es/array'
import { debounce, throttle } from 'lodash-es/function'
import { merge, omit, pick } from 'lodash-es/object'
import { camelCase, capitalize, trim } from 'lodash-es/string'

export default {
  data() {
    return {
      chunkResult: [],
      uniqResult: [],
      filterResult: [],
      user: {
        name: '张三',
        age: 25,
        email: 'zhangsan@example.com',
        address: '北京市',
      },
      extraInfo: {
        phone: '13800138000',
        gender: '男',
        age: 26,
      },
      pickResult: {},
      omitResult: {},
      mergeResult: {},
      camelCaseResult: '',
      capitalizeResult: '',
      trimResult: '',
      debounceInput: '',
      debounceResult: '',
      clickCount: 0,
      throttleResult: 0,
    }
  },
  created() {
    this.chunkResult = chunk([1, 2, 3, 4, 5], 2)
    this.uniqResult = uniq([1, 2, 2, 3, 3, 4, 5, 5])
    this.filterResult = filter([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], n => n > 5)
    this.pickResult = pick(this.user, ['name', 'age'])
    this.omitResult = omit(this.user, ['email', 'address'])
    this.mergeResult = merge({}, this.user, this.extraInfo)
    this.camelCaseResult = camelCase('hello_world')
    this.capitalizeResult = capitalize('hello world')
    this.trimResult = trim('  hello world  ')
    this.handleDebounceInput = debounce(() => {
      this.debounceResult = this.debounceInput
    }, 500)
    this.handleThrottleClick = throttle(() => {
      this.clickCount++
      this.throttleResult = this.clickCount
    }, 1000)
  },
}
</script>

<style lang="scss">
.page-container {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  color: #fff;
  background-color: #000;

  // 青色光晕 (左上角)
  &::before {
    position: absolute;
    top: -300rpx;
    left: -300rpx;
    z-index: 0;
    width: 1000rpx;
    height: 1000rpx;
    pointer-events: none;
    content: '';
    background: radial-gradient(circle, rgba(0, 220, 255, 0.1) 0%, transparent 70%);
    filter: blur(120rpx);
  }

  // 品红色光晕 (右下角)
  &::after {
    position: absolute;
    right: -400rpx;
    bottom: -400rpx;
    z-index: 0;
    width: 1200rpx;
    height: 1200rpx;
    pointer-events: none;
    content: '';
    background: radial-gradient(circle, rgba(255, 42, 109, 0.08) 0%, transparent 70%);
    filter: blur(140rpx);
  }
}

.main-content {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 80rpx 40rpx;
}

.template-title-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40rpx;

  .template-name {
    margin-bottom: 20rpx;
    font-size: 48rpx;
    font-weight: bold;
    color: #fff;
  }

  .title-underline {
    width: 100rpx;
    height: 4rpx;
    background-color: #fff;
    border-radius: 2rpx;
  }
}

.content-section {
  width: 100%;
  max-width: 750rpx;
}

.section {
  margin-bottom: 40rpx;

  .subtitle {
    margin-bottom: 20rpx;
    font-size: 36rpx;
    font-weight: bold;
    color: #fff;
  }
}

.example {
  padding: 20rpx;
  margin-bottom: 20rpx;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 12rpx;
  backdrop-filter: blur(10px);

  .example-title {
    margin-bottom: 10rpx;
    font-weight: bold;
    color: #fff;
  }

  .example-content {
    margin-bottom: 5rpx;
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.7);
    word-break: break-all;
  }

  input {
    width: 100%;
    height: 72rpx;
    padding: 0 20rpx;
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.05);
    border: 2rpx solid rgba(255, 255, 255, 0.1);
    border-radius: 8rpx;

    &::placeholder {
      color: rgba(255, 255, 255, 0.3);
    }
  }

  button {
    width: 100%;
    height: 72rpx;
    margin-top: 20rpx;
    font-size: 28rpx;
    color: white;
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8rpx;
    transition: all 0.3s ease;

    &:active {
      background-color: rgba(255, 255, 255, 0.2);
      transform: scale(0.98);
    }
  }

  .throttle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.footer-decoration {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  height: 200rpx;

  .deco-shape-1 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200rpx;
    height: 200rpx;
    background: linear-gradient(45deg, #00dcff, transparent);
    border-radius: 200rpx;
    opacity: 0.1;
  }

  .deco-shape-2 {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 200rpx;
    height: 200rpx;
    background: linear-gradient(45deg, transparent, #ff2a6d);
    border-radius: 200rpx;
    opacity: 0.1;
  }
}
</style>
